前端导出word文档

2023-08-04 13:29| 来源: 网络整理| 查看: 265

通过docxtemplater导出word图文

前期准备

安装相关依赖包

npm install docxtemplater pizzip --save npm install jszip-utils --save npm install file-saver --save npm install docxtemplater-image-module-free --save // **注意**docxtemplater-image-module在这里是不能用的 npm install echarts --save 复制代码引入依赖包 import Docxtemplater from 'docxtemplater' import JSZipUtils from 'jszip-utils' import JSZip from 'pizzip' import { saveAs } from 'file-saver' import ImageModule from 'docxtemplater-image-module-free' import * as echarts from 'echarts' 复制代码

注：引用docxtemplater-image-module-free报错时，可尝试require引入

const ImageModule = require('docxtemplater-image-module-free') 复制代码

注：导出word文档报错，如下，一般是word模板路径问题，word模板一般放在pubilc根目录，或static根目录

1、表格 word模板

JSZipUtils.getBinaryContent('/word.docx', function (error, content) { // 抛出异常 if (error) { throw error } // 创建一个JSZip实例，内容为模板的内容 const zip = new JSZip(content) // 创建并加载docxtemplater实例对象 const doc = new Docxtemplater().loadZip(zip) // 设置模板变量的值 doc.setData({ table: [{ name: '测试1', num: '5', rate: '33.33', },{ name: '测试2', num: '10', rate: '66.66', }] }) try { // 用模板变量的值替换所有模板变量 doc.render() } catch (error) { // 抛出异常 // const e = { // message: error.message, // name: error.name, // stack: error.stack, // properties: error.properties, // } console.error('导出报表失败') throw error } // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示） const out = doc.getZip().generate({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }) // 将目标文件对象保存为目标类型的文件，并命名 saveAs(out, `test.docx`) }) 复制代码

2、echarts图片生成

在模板中使用{%%image}

// 转换成buffer const base64DataURLToArrayBuffer = function (dataURL) { const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/; if (!base64Regex.test(dataURL)) { return false; } const stringBase64 = dataURL.replace(base64Regex, ''); let binaryString; if (typeof window !== 'undefined') { binaryString = window.atob(stringBase64); } else { binaryString = new Buffer(stringBase64, 'base64').toString('binary'); } const len = binaryString.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) { const ascii = binaryString.charCodeAt(i); bytes[i] = ascii; } return bytes.buffer; } const div = document.createElement('div'); div.setAttribute('style', 'width: 560px;height:280px;') const myChart = echarts.init(div) myChart.setOption({ title: { text: '示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) setTimeout(() => { // 加setTimeout是为了让echarts渲染完成后生成图片 JSZipUtils.getBinaryContent('/word.docx', function (error, content) { // 抛出异常 if (error) { throw error } const opts = { centered: false, fileType: 'docx' } opts.getImage = function (tagValue) { if (tagValue.size && tagValue.data) { return base64DataURLToArrayBuffer(tagValue.data); } return base64DataURLToArrayBuffer(tagValue); }; opts.getSize = function (_, tagValue) { if (tagValue.size && tagValue.data) { return tagValue.size; } return [560, 280]; }; // 创建一个JSZip实例，内容为模板的内容 const zip = new JSZip(content) // 创建并加载docxtemplater实例对象 const doc = new Docxtemplater().loadZip(zip) doc.setOptions({ nullGetter: function () { //设置空值 undefined 为'' return ''; }, }); // 设置图片模块 doc.attachModule(new ImageModule(opts)); // 设置模板变量的值 doc.setData({ image： myChart.getDataURL({ pixelRatio: 5, //导出的图片分辨率比率,默认是1 backgroundColor: '#fff', //图表背景色 excludeComponents: ['toolbox'], //忽略组件的列表 type: 'png', //图片类型支持png和jpeg }) }) try { // 用模板变量的值替换所有模板变量 doc.render() } catch (error) { // 抛出异常 // const e = { // message: error.message, // name: error.name, // stack: error.stack, // properties: error.properties, // } console.error('导出报表失败') throw error } // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示） const out = doc.getZip().generate({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }) // 将目标文件对象保存为目标类型的文件，并命名 saveAs(out, `test.docx`) }) }, 1000); 复制代码

没加 setTimeout

加 setTimeout后

word模板常用

{#list}{/list} // 循环 {#isName}{/isName} // 判断true/false {name} // 对应字段渲染，例：{name: '测试名称'} {%%image} // 图片类型复制代码

【本文地址】

公司简介

联系我们